<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">org-tree</view>
			<view class="tui-page__desc">组织架构树：简单展示，可自定义节点样式</view>
		</view>
		<view class="tui-tree__box">
			<tui-org-tree :treeData="treeData" @click="handleClick"></tui-org-tree>
		</view>
		<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="120rpx auto 40rpx"
			@click="btnClick(1)">多级数据展示</tui-button>
		<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto"
			@click="btnClick(2)">自定义样式</tui-button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				treeData: [{
					text: '组织架构树',
					value: 1,
					//vertical,horizontal 为空则自适应排列
					align: '',
					children: [{
						text: '多级数据展示',
						value: 101,

						page: '../org-tree_default/org-tree_default',
						children: []
					}, {
						text: '自定义样式',
						value: 102,
						page: '../org-tree_style/org-tree_style',
						children: []
					}]
				}]
			}
		},
		methods: {
			handleClick(e) {
				console.log(e)
				let url = e.page;
				if (url) {
					this.tui.href(url)
				} else {
					this.tui.toast('点击子级标签进入内页~')
				}
			},
			btnClick(type) {
				let url = type == 1 ? '../org-tree_default/org-tree_default' : '../org-tree_style/org-tree_style';
				this.tui.href(url)
			}
		}
	}
</script>

<style>
	.tui-tree__box {
		display: inline-block;
		margin: 0 auto;
	}
</style>
